.sec{
    width: 500px;
    height: 400px;
    margin: 60px auto;
    position: relative;
    transform-style: preserve-3d;
    transition: all 20s linear;
}
body{
    perspective: 86000px;
    margin: 0;
}
.sec div{
    width: 300px;
    height: 400px;
    /*background-image: url("http://demo.mxyhn.xyz:8020/cssthemes6/cpts_1992_fhz/images/g5.jpg");*/
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    border-radius: 10%;
    top: 15px;
    left: 100px;
    overflow: hidden;
}
.sec div>img{
    width: inherit;
    height: inherit;
    border-radius: inherit;
}

/*.sec div:nth-child(1) {*/
/*    !*background-image: url("../jp/1.jpg");*!*/
/*}*/
/*.sec div:nth-child(2) {*/
/*    background-image: url("../jp/2.jpg");*/
/*    background-position: 10px 10px;*/
/*}*/
/*.sec div:nth-child(3) {*/
/*    background-image: url("../jp/3.jpg");*/
/*}*/
/*.sec div:nth-child(4) {*/
/*    background-image: url("../jp/4.jpg");*/
/*}*/
/*.sec div:nth-child(5) {*/
/*    background-image: url("../jp/5.jpg");*/
/*}*/
/*.sec div:nth-child(6) {*/
/*    background-image: url("../jp/6.jpg");*/
/*}*/
.sec:hover{
    transform: rotateY(360deg);
}
.sec div:nth-child(1){
    transform: rotateY(0deg) translateZ(600px);
}
.sec div:nth-child(2){
    transform: rotateY(40deg) translateZ(600px);
}
.sec div:nth-child(3){
    transform: rotateY(80deg) translateZ(600px);
}
.sec div:nth-child(4){
    transform: rotateY(120deg) translateZ(600px);
}
.sec div:nth-child(5){
    transform: rotateY(160deg) translateZ(600px);
}
.sec div:nth-child(6){
    transform: rotateY(200deg) translateZ(600px);
}
.sec div:nth-child(7){
    transform: rotateY(240deg) translateZ(600px);
}
.sec div:nth-child(8){
    transform: rotateY(280deg) translateZ(600px);
}
.sec div:nth-child(9){
    transform: rotateY(320deg) translateZ(600px);
}